<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div >
				<div id="app"> 
					<table border="1px" class="table table-striped   text-center">
						<tr class="table-primary">
							<td>省份</td>
							<td>市</td>
							<td>区县</td>
							<td>详细地址</td>
							<td>手机号</td>
							<td>收件人</td>
							<td>是否默认地址</td>
							<td>操作</td>
						</tr>
						<tr v-for="address in addresses" class="table-success">
							<td>{{address.province}}</td>
							<td>{{address.city}}</td>
							<td>{{address.county}}</td>
							<td>{{address.detailed}}</td>
							<td>{{address.telphone}}</td>
							<td>{{address.accept}}</td>
							<td v-if="address.type=='y'">是</td>
							<td v-else>
								<span>否</span>
								<button @click="settype(address)" class="btn btn-outline-success" style="width: 120px;height: 30px;">设为默认</button>
							</td>
							<td>
								<button @click="del(address)" class="btn btn-outline-danger">删除</button>
							</td>

						</tr>
					</table>
				</div>
	<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			addresses:[]
		},
		//页面加载完之前触发
		created(){
			
		},
		//页面加载完后触发
		mounted(){
			axios.get("address/find?u_id=1").then(res => {
				console.info(res);
				this.addresses=res.data;
			})
		},
		methods:{
			del:function(address){
				//先删数据库
				axios.get("address/del?a_id="+address.a_id).then(res => {
					if(res.data==1){
						//刷新页面上的数据
						location.reload();
					}
					
				})
					            
			},
			settype:function(address){
				axios.get("address/type?a_id="+address.a_id).then(res => {
					if(res.data==1){
						location.reload();
					}
					
				})
			}
		
			
		},
		watch:{
			address:{
				handler(newValue,oldValue){
					
				},
				deep:true
			}
		}
	});
	</script>
</body>
</html>